<script setup lang="ts">
import { ref } from 'vue'
import * as accountApi from '@/api/account'
import * as systemSettingApi from '@/api/systemSetting'
import { message } from 'ant-design-vue'
import { copyToCliboard } from '@/hooks/util.ts'
import MsgTable from './MsgTable.vue'
import Emoji from './Emoji.vue'
import OutCinemaLine from './OutCinemaLine.vue'

// 出票方式
let quotationMode = ref<number>(1)
const OutCinemaLineRef = ref()
const msgTableRef = ref()
const emojiRef = ref()
const textareaRef = ref()
const textareaRef2 = ref()
const textareaRef3 = ref()
const textareaRef4 = ref()
const textareaRef5 = ref()

let txValue = ref<Array<string>>([])

// 自动改价开关
const changePriceState = ref<boolean>()
const handleChangePriceState = async () => {
  console.log('自动改价开关=', changePriceState.value)
}

// 自动识别报价
const autoPrice = ref<boolean>()
const autoChangePrice = async () => {
  console.log('autoPrice=', autoPrice.value)
}
// 自动发货
const sendState = ref<boolean>()
const autoSendState = async () => {
  console.log('autoPrice=', sendState.value)
}
// 自动回复
const autoReply = ref<boolean>()
const autoChangeReply = async () => {
  console.log('autoReply=', autoReply.value)
}

// 放映时间
let showTime = ref<number>(0)
let showTimeDesc = ref<string>('')
let quoteDuration = ref<number>(0)
// 观影提醒功能
let showTx = ref<number>(0)
let showTxDesc = ref<string>('')

// 收货后提醒功能
let afterReceiveRemindersTime = ref<number>(0)
let afterReceiveRemindersScript = ref<string>('')

// 黑名单用户提醒
let fansBlacklistReply = ref<string>('')

// 收货提醒功能
let receiveRemindersTime = ref<number>(0)
let receiveRemindersScript = ref<string>('')

// 添加好友招呼消息
const tableList = ref<Array<any>>([])
const setTableList = (args: any) => {
  tableList.value = args
  tableList.value = tableList.value.map(item => {
    return {
      robotId: okRobat.value,
      content: item.content,
      keyword: item.keyword,
      type: item.type,
    }
  })
  console.log('tableList=', tableList.value)
}

// 选择表情
const selectEmoji = () => {
  emojiRef.value.showModal()
}

// 获取文本域的光标位置
const getCursorPosition = (inputElement: HTMLInputElement) => {
  if (!inputElement) return 0
  const selectionStart = inputElement.selectionStart
  const selectionEnd = inputElement.selectionEnd
  if (selectionStart === selectionEnd) return selectionStart
  return selectionStart
}
let cursorPosition = ref<number>(0)
let target = ref<string>('')
const getPosition = (textarea: any) => {
  // console.log('textarea=', textarea)

  if (textarea == 'textareaRef') {
    target.value = 'textareaRef'
    const textareaElement = textareaRef.value.$el
    cursorPosition.value = getCursorPosition(textareaElement) as number // 获取光标的位置
  } else if (textarea == 'textareaRef2') {
    target.value = 'textareaRef2'
    const textareaElement = textareaRef2.value.$el
    cursorPosition.value = getCursorPosition(textareaElement) as number // 获取光标的位置
  } else if (textarea == 'textareaRef3') {
    target.value = 'textareaRef3'
    const textareaElement = textareaRef3.value.$el
    cursorPosition.value = getCursorPosition(textareaElement) as number // 获取光标的位置
  } else if (textarea == 'textareaRef4') {
    target.value = 'textareaRef4'
    const textareaElement = textareaRef4.value.$el
    cursorPosition.value = getCursorPosition(textareaElement) as number // 获取光标的位置
  } else if (textarea == 'textareaRef5') {
    target.value = 'textareaRef5'
    const textareaElement = textareaRef5.value.$el
    cursorPosition.value = getCursorPosition(textareaElement) as number // 获取光标的位置
  } else {
    console.log('textareaRef未定义或不是DOM元素')
  }
}

// 已经选好表情
const setOkEmoji = (args: string) => {
  if (target.value == 'textareaRef') {
    // 从原始字符串的position位置开始截取到末尾的子串
    let substringAfterPosition = showTimeDesc.value.slice(cursorPosition.value)
    // 拼接新字符串和截取后的子串
    let result = showTimeDesc.value.slice(0, cursorPosition.value) + args + substringAfterPosition
    showTimeDesc.value = result
  } else if (target.value == 'textareaRef2') {
    let substringAfterPosition = afterReceiveRemindersScript.value.slice(cursorPosition.value)
    let result =
      afterReceiveRemindersScript.value.slice(0, cursorPosition.value) +
      args +
      substringAfterPosition
    afterReceiveRemindersScript.value = result
  } else if (target.value == 'textareaRef3') {
    let substringAfterPosition = receiveRemindersScript.value.slice(cursorPosition.value)
    let result =
      receiveRemindersScript.value.slice(0, cursorPosition.value) + args + substringAfterPosition
    receiveRemindersScript.value = result
  } else if (target.value == 'textareaRef4') {
    let substringAfterPosition = showTxDesc.value.slice(cursorPosition.value)
    let result = showTxDesc.value.slice(0, cursorPosition.value) + args + substringAfterPosition
    showTxDesc.value = result
  } else if (target.value == 'textareaRef5') {
    let substringAfterPosition = fansBlacklistReply.value.slice(cursorPosition.value)
    let result =
      fansBlacklistReply.value.slice(0, cursorPosition.value) + args + substringAfterPosition
    fansBlacklistReply.value = result
  }
}

// 放映时间限制话术的变量
const showTimeDescTagList = ref(['粉丝昵称', '放映时间', '限制间隔'])

// 观影提醒话术的变量
const showTxDescTagList = ref(['粉丝昵称', '影院名', '影片名', '放映时间'])

// 出票方式
let ticketType = ref<number>(1)

// 复制文本
const copyTag = (text: string) => {
  copyToCliboard(`[${text}]`)
  message.success('复制成功~')
}

// 兜底报价开关
let bottomPriceSwitch = ref<boolean>(true)
const togBottomPrice = (e: any) => {
  bottomPriceSwitch.value = e
  console.log('bottomPriceSwitch=', bottomPriceSwitch.value)
}

const transformObject = obj => {
  if (obj.name) {
    obj.label = obj.name
    obj.value = obj.id
  }

  // 检查是否存在category字段
  if (Array.isArray(obj.category)) {
    // 将category字段名改为children
    obj.children = obj.category
    // 删除旧的category字段
    delete obj.category

    // 递归处理每个子对象
    obj.children.forEach(child => {
      transformObject(child)
    })
  }
}

let province = ref<string | number>('')
let city = ref<string | number>('')
let area = ref<string | number>('')
let town = ref<string>('')
let name = ref<string>('')
let phone = ref<string>('')

// 获取省市区
let areaData = ref([])
let okArea = ref<Array<number>>([])
const getArea = async () => {
  try {
    let { state, data, message: msg } = await systemSettingApi.getAreaList()
    if (state === 200) {
      data.forEach(item => {
        transformObject(item)
      })
      areaData.value = data
      // console.log('areaData=', areaData.value)
      if (province.value != '') {
        okArea.value = [province.value, city.value, area.value]
      } else {
        okArea.value = []
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
let cascaderValue = ref<string[]>([])
const cascaderChange = (value: any[], selectedOptions: any[]) => {
  cascaderValue.value = selectedOptions
  // console.log('value=', value)
  // console.log('cascaderValue=', cascaderValue.value)
  province.value = cascaderValue.value[0].value
  city.value = cascaderValue.value[1].value
  area.value = cascaderValue.value[2].value
  // console.log('province=', province.value)
  // console.log('city=', city.value)
  // console.log('area=', area.value)
}
const filter = (inputValue: string, path: Option[]) => {
  return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
}

let phoneError = ref<string>('')
const validatePhone = () => {
  const re = /^1[3-9]\d{9}$/ // 正确的手机号正则表达式
  if (!re.test(phone.value) && phone.value != '') {
    phoneError.value = '手机号码格式不正确'
  } else {
    phoneError.value = '' // 清除错误信息
  }
}

onMounted(() => {
  getArea()
  getFishRobotList()
  getGroupList()
})

// 拉取机器人列表
let okRobat = ref<string>()
import type { SelectProps } from 'ant-design-vue'
const robatList = ref<SelectProps['options']>([])
interface OptionList {
  label: string
  value: string
}
let optionList = ref<Array<OptionList>>([])
const getFishRobotList = async () => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await accountApi.getFishRobotList({
      currentPage: 1,
      pageSize: 100,
    })
    if (state === 200) {
      robatList.value = data.list
      optionList.value = data.list.map((item: any) => {
        return {
          label: item.nickName,
          value: item.id,
        }
      })

      options.value = data.list
      if (data.list.length == 0) {
        message.error('闲鱼：无平台账号，请先添加平台账号')
      } else if (data.list.length > 0) {
        selectRobat(data.list[0].id)
      }
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectRobat = (selectValue: any) => {
  getArea()
  okRobat.value = selectValue as string
  txValue.value = []
  getIdleFishConfig(okRobat.value)
}

// 选择微信账号/选择闲鱼账号
const getIdleFishConfig = async (robotId: string) => {
  try {
    let {
      state,
      data,
      message: msg,
    } = await systemSettingApi.getIdleFishConfig({
      robotId,
    })
    if (state === 200) {
      // console.log('data=', data)
      bottomPriceSwitch.value = data.bottomPriceSwitch == 1 ? true : false
      autoPrice.value = data.quoteState == 1 ? true : false // 报价开关
      autoReply.value = data.replyState == 1 ? true : false // 回复开关
      sendState.value = data.sendState == 1 ? true : false //自动发货
      showTime.value = data.showTimeLimit // 放映时间限制
      showTimeDesc.value = data.showTimeLimitScript // 放映时间限制话术
      showTxDesc.value = data.movieRemindersScript
      showTx.value = data.movieRemindersTime
      afterReceiveRemindersScript.value = data.afterReceiveRemindersScript
      fansBlacklistReply.value = data.fansBlacklistReply
      afterReceiveRemindersTime.value = data.afterReceiveRemindersTime
      receiveRemindersScript.value = data.receiveRemindersScript
      receiveRemindersTime.value = data.receiveRemindersTime
      quoteDuration.value = data.quoteDuration
      ticketType.value = data.outTicketState

      okOutLineList.value = data.lineList.map((item: any) => {
        return {
          label: item.name,
          value: item.code,
        }
      })

      outLine.value = data.lineList.map((item: any) => item.code)

      province.value = Number(data.province)
      city.value = Number(data.city)
      area.value = Number(data.area)
      town.value = data.town
      name.value = data.name
      phone.value = data.phone
      bxChannel.value = data.alternativeProvisionChannel // 备选供应渠道
      channel.value = data.provisionChannel // 首选供应渠道
      alternativeChannel.value = data.alternativeChannel // 备选供应渠道 - 新
      isFixedPrice.value = data.enableLimitPrice // 是否启用限价 - 新
      quotationSort.value = data.quotationSort // 优先执行报价规则
      quotationMode.value = data.quotationMode //报价模式

      if (channel.value == 3 || channel.value == 7 || channel.value == 8 || channel.value == 10) {
        fixedPriceFlag.value = true
      } else {
        fixedPriceFlag.value = false
      }

      if (
        alternativeChannel.value == 3 ||
        alternativeChannel.value == 7 ||
        alternativeChannel.value == 8 ||
        alternativeChannel.value == 10
      ) {
        fixedPriceFlag_2.value = true
      } else {
        fixedPriceFlag_2.value = false
      }

      alternativeChannelList.value?.forEach(item => {
        item.able = false
        if (item.value == channel.value) {
          item.able = true
        }
        // if (item.value == 7) {
        //   item.able = true
        // }
      })
      channelList.value?.forEach(item => {
        item.able = false
        if (item.value == alternativeChannel.value) {
          item.able = true
        }
        // if (item.value == 7) {
        //   item.able = true
        // }
      })

      changePriceState.value = data.changePriceState == 1 ? true : false // 自动改价开关
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}

// 推送配置
let sendRobat = ref<Array<string>>([])
const selectSendRobat = (selectValue: any) => {
  sendRobat.value = selectValue
  // console.log('sendRobat.value=', sendRobat.value)
}
const options = ref<SelectProps['options']>([])
const groupList = ref<SelectProps['options']>([])
const groupId = ref<string>()
const getGroupList = async () => {
  try {
    let { state, data, message: msg } = await accountApi.getFishRobotGroupList()
    if (state === 200) {
      groupList.value = data
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const selectGroup = (selectValue: unknown) => {
  groupId.value = selectValue as string
  sendRobat.value = options.value
    .filter(item => item.groupId == groupId.value)
    .map(element => element.id)
}
const pushRobot = async () => {
  if (sendRobat.value?.length == 0) {
    message.error('请选择要推送的账号！')
    return
  }

  let params = {
    robotIds: sendRobat.value,
    fishConfigDTO: {
      quoteDuration: quoteDuration.value,
      movieRemindersScript: showTxDesc.value, // 观影提醒时间话术
      afterReceiveRemindersScript: afterReceiveRemindersScript.value,
      fansBlacklistReply: fansBlacklistReply.value,
      afterReceiveRemindersTime: afterReceiveRemindersTime.value,
      movieRemindersTime: showTx.value, // 观影提醒时间
      receiveRemindersScript: receiveRemindersScript.value,
      receiveRemindersTime: receiveRemindersTime.value,
      quoteState: autoPrice.value ? 1 : 0, // 报价开关
      replyState: autoReply.value ? 1 : 0, // 回复开关
      sendState: sendState.value ? 1 : 0,
      showTimeLimit: showTime.value, // 放映时间限制
      showTimeLimitScript: showTimeDesc.value, // 放映时间限制话术
      outTicketState: ticketType.value, // 出票方式
      bottomPriceSwitch: bottomPriceSwitch.value ? '1' : '0',
      excludeCinemaLines: outLine.value,
      province: province.value,
      city: city.value,
      area: area.value,
      town: town.value,
      name: name.value,
      phone: phone.value,
      alternativeProvisionChannel: bxChannel.value, // 备选供应渠道
      provisionChannel: channel.value, // 首选供应渠道
      alternativeChannel: alternativeChannel.value, // 备选供应渠道 - 新
      enableLimitPrice: isFixedPrice.value, // 是否启用限价 - 新
      changePriceState: changePriceState.value ? 1 : 0, // 自动改价开关
      quotationSort: quotationSort.value, // 优先执行报价规则
      quotationMode: quotationMode.value, //询价模式
    },
  }

  // 两个都不支持，就是不支持
  // if(){}

  try {
    let { state, message: msg } = await systemSettingApi.fishConfigPushRobots(params)
    if (state === 200) {
      message.success('推送成功')
    } else {
      message.error(msg)
    }
  } catch (error) {
    message.error('网络请求连接失败~')
  }
}
const sendOk = () => pushRobot()

// select搜索
const filterOption = (input: string, option: any) => {
  return option.label.indexOf(input) >= 0
}

let okOutLineList = ref<Array<any>>([])
const outCinemaLine = () => {
  OutCinemaLineRef.value.showModal()
}

let outLine = ref<Array<any>>([])
const getOutCinemaLine = (list: Array<any>) => {
  console.log('排除院线list=', list)
  outLine.value = list.map(item => item.value)
}

// 首选渠道
let channel = ref<number | string>(6)
const channelList = ref<SelectProps['options']>([
  {
    label: '麻花电影票（可限价）',
    value: 3,
    able: false,
  },
  {
    label: '芒果电影票（一口价）',
    value: 5,
    able: false,
  },
  {
    label: '星驰电影票（一口价）',
    value: 8,
    able: false,
  },
  {
    label: '哈哈电影票',
    value: 6,
    able: false,
  },
  {
    label: '守兔电影票（一口价）',
    value: 11,
    able: false,
  },
  {
    label: '守兔电影票（可限价）',
    value: 7,
    // able: true,
    able: false,
  },
  {
    label: '哈哈电影快票（固定9折）',
    value: 9,
    able: false,
  },
  {
    label: '影划算电影票（可限价）',
    value: 10,
    able: false,
  },
])
let fixedPriceFlag = ref<boolean>(false)
let isFixedPrice = ref<number>(1)
const selectChannel = (e: any) => {
  // console.log('首选渠道=', e)
  if (e == 3 || e == 8 || e == 7 || e == 10) {
    fixedPriceFlag.value = true
  } else {
    fixedPriceFlag.value = false
  }

  alternativeChannelList.value?.forEach(item => {
    item.able = false
    if (item.value == e) {
      item.able = true
    }
    // if (item.value == 7) {
    //   item.able = true
    // }
  })
  // channelList.value?.forEach(item => {
  //   if (item.value == 7) {
  //     item.able = true
  //   }
  // })
}

// 备选渠道 - 新
let alternativeChannel = ref<number | string>(3)
let fixedPriceFlag_2 = ref<boolean>(false)
const alternativeChannelList = ref<SelectProps['options']>([
  {
    label: '不使用',
    value: 0,
    able: false,
  },
  {
    label: '麻花电影票（可限价）',
    value: 3,
    able: false,
  },
  {
    label: '芒果电影票（一口价）',
    value: 5,
    able: false,
  },
  {
    label: '星驰电影票（一口价）',
    value: 8,
    able: false,
  },
  {
    label: '哈哈电影票',
    value: 6,
    able: false,
  },
  {
    label: '守兔电影票（一口价）',
    value: 11,
    able: false,
  },
  {
    label: '守兔电影票（可限价）',
    value: 7,
    // able: true,
    able: false,
  },
  {
    label: '哈哈电影快票（固定9折）',
    value: 9,
    able: false,
  },
  {
    label: '影划算电影票（可限价）',
    value: 10,
    able: false,
  },
])
const selectAlternativeChannel = (e: any) => {
  // console.log('备选渠道=', e)
  if (e == 3 || e == 8 || e == 7 || e == 10) {
    fixedPriceFlag_2.value = true
  } else {
    fixedPriceFlag_2.value = false
  }

  channelList.value?.forEach(item => {
    item.able = false
    if (item.value == e) {
      item.able = true
    }
    // if (item.value == 7) {
    //   item.able = true
    // }
  })
  // alternativeChannelList.value?.forEach(item => {
  //   if (item.value == 7) {
  //     item.able = true
  //   }
  // })
}
// 备选渠道 - 新

// 备选渠道
let bxChannel = ref<number>(0)

// 优先执行报价规则
let quotationSort = ref<number>(1)
</script>

<template>
  <div>
    <div style="margin: 5px 0; text-align: right">
      <span>选择闲鱼账号：</span>
      <a-select
        v-model:value="okRobat"
        @change="selectRobat"
        placeholder="请选择"
        style="width: 150px; text-align: left"
        show-search
        :options="optionList"
        :filter-option="filterOption"
      >
        <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div>

    <div class="rowBox">
      <span class="label-1">自动改价开关：</span>
      <span class="label-2">
        <a-switch v-model:checked="changePriceState" @change="handleChangePriceState" />
      </span>
    </div>
    <div style="color: #bfbfbf; position: relative; left: 140px; bottom: 14px">
      关闭后用户拍下不再自动改价
    </div>

    <div class="rowBox">
      <span class="label-1">自动识别报价：</span>
      <span class="label-2">
        <a-switch v-model:checked="autoPrice" @change="autoChangePrice" />
      </span>
    </div>
    <div style="color: #bfbfbf; position: relative; left: 140px; bottom: 14px">
      关闭后识别成功不再进行报价，识别失败会正常发送失败文案
    </div>

    <div class="rowBox">
      <span class="label-1">兜底报价开关：</span>
      <span class="label-2">
        <a-switch v-model:checked="bottomPriceSwitch" @change="togBottomPrice" />
      </span>
    </div>
    <div style="color: #bfbfbf; position: relative; left: 140px; bottom: 14px">
      当没有命中任何报价规则时按原价93折进行报价
    </div>

    <div class="rowBox">
      <span class="label-1">智能问答回复开关：</span>
      <span class="label-2">
        <a-switch v-model:checked="autoReply" @change="autoChangeReply" />
      </span>
    </div>
    <div style="color: #bfbfbf; position: relative; left: 140px; bottom: 14px">
      关闭后智能问答不再被触发
    </div>

    <div class="rowBox">
      <span class="label-1">自动发货：</span>
      <span class="label-2">
        <a-switch v-model:checked="sendState" @change="autoSendState" />
      </span>
    </div>
    <div style="color: #bfbfbf; position: relative; left: 140px; bottom: 14px">
      关闭后不自动操作闲鱼发货
    </div>

    <div class="rowBox">
      <span class="label-1">报价记录有效时长：</span>
      <a-input-number style="width: 120px" :min="0" :max="4320" v-model:value="quoteDuration"></a-input-number>
      <span style="margin: 5px">分钟</span>
    </div>
    <div class="rowBox">
      <span class="label-1">放映时间限制：</span>
      <a-input-number style="width: 120px" :min="0" v-model:value="showTime"></a-input-number>
      <span style="margin: 5px">分钟</span>

      <span style="line-height: 30px; margin-left: 20px">排除院线列表：</span>
      <a-button size="small" type="primary" @click="outCinemaLine">设置</a-button>
    </div>
    <div style="position: relative; left: 140px; top: -16px; width: 450px; border-radius: 20px">
      <span style="color: #bfbfbf">判断场次时间距离现在时间的间隔，小于设置后触发制定话术</span>
    </div>

    <div class="rowBox">
      <span class="label-1">放映时间限制话术：</span>
      <a-textarea
        ref="textareaRef"
        :rows="4"
        class="iptWidth"
        autocomplete="off"
        style="max-height: 200px"
        v-model:value="showTimeDesc"
        @click="getPosition('textareaRef')"
      ></a-textarea>
    </div>

    <div class="rowBox">
      <span class="label-1"></span>
      <div>
        <a @click="selectEmoji">
          <SmileOutlined style="font-size: 26px" />
        </a>
      </div>
      <div style="width: 500px; margin-left: 10px">
        <a-tag
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
          v-for="(item, index) in showTimeDescTagList"
          :key="index"
          @click="copyTag(item)"
        >
          {{ item }}
        </a-tag>
      </div>
    </div>
    <div class="rowBox">
      <span class="label-1">收货后提醒时间：</span>
      <a-input-number
        style="width: 120px"
        :min="0"
        v-model:value="afterReceiveRemindersTime"
      ></a-input-number>
      <span style="margin: 5px">分钟</span>
    </div>
    <div style="position: relative; left: 140px; top: -16px; width: 450px; border-radius: 20px">
      <span style="color: #bfbfbf">收货后x分钟，触发此文案，为空不发送</span>
    </div>

    <div class="rowBox">
      <span class="label-1">收货后提醒话术：</span>
      <a-textarea
        ref="textareaRef2"
        :rows="4"
        class="iptWidth"
        autocomplete="off"
        style="max-height: 200px"
        @click="getPosition('textareaRef2')"
        v-model:value="afterReceiveRemindersScript"
      ></a-textarea>
    </div>
    <div class="rowBox">
      <span class="label-1"></span>
      <div>
        <a @click="selectEmoji">
          <SmileOutlined style="font-size: 26px" />
        </a>
      </div>
      <div style="width: 500px; margin-left: 10px">
        <a-tag
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
          v-for="(item, index) in showTxDescTagList"
          :key="index"
          @click="copyTag(item)"
        >
          {{ item }}
        </a-tag>
      </div>
    </div>

    <div class="rowBox">
      <span class="label-1">收货提醒时间：</span>
      <a-input-number
        style="width: 120px"
        :min="0"
        v-model:value="receiveRemindersTime"
      ></a-input-number>
      <span style="margin: 5px">分钟</span>
    </div>
    <div style="position: relative; left: 140px; top: -16px; width: 450px; border-radius: 20px">
      <span style="color: #bfbfbf">放映结束x分钟后，触发此文案，为空不发送</span>
    </div>

    <div class="rowBox">
      <span class="label-1">收货提醒话术：</span>
      <a-textarea
        ref="textareaRef3"
        :rows="4"
        class="iptWidth"
        autocomplete="off"
        style="max-height: 200px"
        @click="getPosition('textareaRef3')"
        v-model:value="receiveRemindersScript"
      ></a-textarea>
    </div>
    <div class="rowBox">
      <span class="label-1"></span>
      <div>
        <a @click="selectEmoji">
          <SmileOutlined style="font-size: 26px" />
        </a>
      </div>
      <div style="width: 500px; margin-left: 10px">
        <a-tag
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
          v-for="(item, index) in showTxDescTagList"
          :key="index"
          @click="copyTag(item)"
        >
          {{ item }}
        </a-tag>
      </div>
    </div>

    <div class="rowBox">
      <span class="label-1">观影提醒时间：</span>
      <a-input-number style="width: 120px" :min="0" v-model:value="showTx"></a-input-number>
      <span style="margin: 5px">分钟</span>
    </div>
    <div style="position: relative; left: 140px; top: -16px; width: 450px; border-radius: 20px">
      <span style="color: #bfbfbf">可支持放映前x分钟，触发文案xxx，为空不发送</span>
    </div>

    <div class="rowBox">
      <span class="label-1">观影提醒话术：</span>
      <a-textarea
        ref="textareaRef4"
        :rows="4"
        class="iptWidth"
        autocomplete="off"
        style="max-height: 200px"
        @click="getPosition('textareaRef4')"
        v-model:value="showTxDesc"
      ></a-textarea>
    </div>

    <div class="rowBox">
      <span class="label-1"></span>
      <div>
        <a @click="selectEmoji">
          <SmileOutlined style="font-size: 26px" />
        </a>
      </div>
      <div style="width: 500px; margin-left: 10px">
        <a-tag
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
          v-for="(item, index) in showTxDescTagList"
          :key="index"
          @click="copyTag(item)"
        >
          {{ item }}
        </a-tag>
      </div>
    </div>

    <div class="rowBox">
      <span class="label-1">黑名单用户回复话术：</span>
      <a-textarea
        ref="textareaRef5"
        :rows="4"
        class="iptWidth"
        autocomplete="off"
        style="max-height: 200px"
        @click="getPosition('textareaRef5')"
        v-model:value="fansBlacklistReply"
      ></a-textarea>
    </div>

    <div class="rowBox">
      <span class="label-1"></span>
      <div>
        <a @click="selectEmoji">
          <SmileOutlined style="font-size: 26px" />
        </a>
      </div>
      <!-- <div style="width: 500px; margin-left: 10px">
        <a-tag
          color="blue"
          style="margin: 5px; color: rgba(0, 0, 0, 0.65); cursor: pointer"
          v-for="(item, index) in showTxDescTagList"
          :key="index"
          @click="copyTag(item)"
        >
          {{ item }}
        </a-tag>
      </div> -->
    </div>

    <div class="rowBox">
      <span class="label-1">退货信息：</span>
      <a-cascader
        style="width: 250px"
        v-model:value="okArea"
        :options="areaData"
        :show-search="{ filter }"
        @change="cascaderChange"
        placeholder="请选择省/市/区"
      />
      <a-input v-model:value="town" style="width: 300px; margin-left: 10px" placeholder="街道" />
    </div>

    <div class="rowBox">
      <span class="label-1"></span>
      <a-input v-model:value="name" style="width: 180px" placeholder="姓名" />
      <a-input
        v-model:value="phone"
        @blur="validatePhone"
        style="width: 150px; margin-left: 10px"
        placeholder="手机号"
      />
      <div v-if="phoneError" style="color: red; margin-left: 10px; line-height: 30px">
        {{ phoneError }}
      </div>
    </div>

    <div class="rowBox">
      <span class="label-3">出票方式：</span>
      <a-radio-group v-model:value="ticketType">
        <a-radio :value="1">手动</a-radio>
        <a-radio :value="2">自动</a-radio>
      </a-radio-group>
      <a-popover color="black">
        <template #content>
          <div style="color: #fff">
            <div>手动出票：粉丝支付完成后，将通知运营者进行手动出票</div>
            <div>自动出票：粉丝支付完成后，订单推送到平台，完成出票，请确保余额充足</div>
          </div>
        </template>
        <QuestionCircleOutlined style="color: red; font-size: 18px; line-height: inherit" />
      </a-popover>
    </div>

    <div class="rowBox">
      <span class="label-3">报价出票模式：</span>
      <a-radio-group v-model:value="quotationMode">
        <a-radio :value="1">预估限价</a-radio>
        <a-radio :value="2" :disabled="true">一口价</a-radio>
      </a-radio-group>
       <a-popover color="black">
        <template #content>
          <div style="color: #fff">
            <div>预估限价：基于历史成交数据、市场供需关系、场次信息，给出预估价格，可在预估基础上设置报价和限价</div>
            <div>一口价：联动多供应平台，一口价成交，成功率高，溢价包赔付</div>
          </div>
        </template>
        <QuestionCircleOutlined style="color: red; font-size: 18px; line-height: inherit" />
      </a-popover>
    </div>

    <!-- <div class="rowBox">
      <span class="label-3">首选供应渠道：</span>
      <a-select
        v-model:value="channel"
        placeholder="请选择"
        @change="selectChannel"
        style="width: 300px"
        allowClear
      >
        <a-select-option
          v-for="(item, index) in channelList"
          :key="index"
          :value="item.value"
          :disabled="item.able"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div> -->

    <!-- <div style="position: relative; left: 160px; top: -8px; width: 450px; border-radius: 20px">
      <span v-if="channel == 3" style="color: #bfbfbf">
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-if="channel == 10" style="color: #bfbfbf">
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="channel == 5" style="color: #bfbfbf">
        出票成本=预估出票价
      </span>
      <span v-else-if="channel == 7" style="color: #bfbfbf">
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="channel == 11" style="color: #bfbfbf">
        你的出票成本=预估出票价
      </span>
      <span v-else-if="channel == 9" style="color: #bfbfbf">
        你的出票成本=猫淘价（原价）*90%
      </span>
      <span v-else-if="channel == 6" style="color: #bfbfbf">
        不支持限价，你的出票成本=供应商中标价+原价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="channel == 8" style="color: #bfbfbf">
        你的出票成本=预估出票价
      </span>
    </div> -->

    <!-- <div class="rowBox">
      <span class="label-3">备选供应渠道：</span>
      <a-radio-group v-model:value="bxChannel">
        <a-radio :value="0">不使用</a-radio>
        <a-radio :value="1">使用</a-radio>
      </a-radio-group>
    </div> -->

    <!-- 备选渠道 - 新 -->
    <!--     
    <div class="rowBox">
      <span class="label-3">备选供应渠道：</span>
      <a-select
        v-model:value="alternativeChannel"
        placeholder="请选择"
        @change="selectAlternativeChannel"
        style="width: 300px"
        allowClear
      >
        <a-select-option
          v-for="(item, index) in alternativeChannelList"
          :key="index"
          :value="item.value"
          :disabled="item.able"
        >
          {{ item.label }}
        </a-select-option>
      </a-select>
    </div> -->
    <!-- <div style="position: relative; left: 160px; top: -8px; width: 450px; border-radius: 20px">
      <span v-if="alternativeChannel == 3" style="color: #bfbfbf">
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-if="alternativeChannel == 10" style="color: #bfbfbf">
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="alternativeChannel == 5" style="color: #bfbfbf">
        出票成本=预估出票价
      </span>
      <span v-else-if="alternativeChannel == 7" style="color: #bfbfbf">
        支持限价，你的出票成本=供应商中标价+供应商中标价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="alternativeChannel == 11" style="color: #bfbfbf">
        你的出票成本=预估出票价
      </span>
      <span v-else-if="alternativeChannel == 9" style="color: #bfbfbf">
        你的出票成本=猫淘价（原价）*90%
      </span>
      <span v-else-if="alternativeChannel == 6" style="color: #bfbfbf">
        不支持限价，你的出票成本=供应商中标价+原价*3%，手续费为供应渠道收取，票达人平台不收取任何订单手续费
      </span>
      <span v-else-if="alternativeChannel == 8" style="color: #bfbfbf">
        你的出票成本=预估出票价
      </span>
    </div> -->
    <!-- 备选渠道 - 新 -->

    <!-- 新增 - 是否启用限价 -->
    <div class="rowBox" v-if="fixedPriceFlag || fixedPriceFlag_2">
      <span class="label-3">是否限价：</span>
      <a-radio-group v-model:value="isFixedPrice" style="margin-top: 5px">
        <a-radio :value="1">启用限价</a-radio>
        <a-radio :value="0">不启用限价</a-radio>
      </a-radio-group>
    </div>

    <!-- 优先执行报价规则 -->
    <div class="rowBox">
      <span class="label-3">优先执行的报价模式：</span>
      <a-radio-group v-model:value="quotationSort" style="margin-top: 5px">
        <a-radio :value="1">渠道询价模式</a-radio>
        <a-radio :value="2">专业报价模式</a-radio>
      </a-radio-group>
    </div>
    <div style="position: relative; left: 160px; top: -8px">
      <div v-if="quotationSort == 1" style="color: #bfbfbf">
        系统报价执行顺序：渠道询价模式->专业报价模式->兜底模式
      </div>
      <div v-if="quotationSort == 2" style="color: #bfbfbf">
        系统报价执行顺序：专业报价模式->渠道询价模式->兜底模式
      </div>
    </div>

    <!-- 推送 -->
    <div style="margin: 5px 0">
      <span>选择推送闲鱼账号：</span>
      <a-select
        v-model:value="groupId"
        @change="selectGroup"
        placeholder="请选择分组"
        style="width: 6%; text-align: left"
      >
        <a-select-option v-for="(item, index) in groupList" :key="index" :value="item.id">
          {{ item.groupName }}
        </a-select-option>
      </a-select>
      <a-select
        mode="multiple"
        v-model:value="sendRobat"
        @change="selectSendRobat"
        placeholder="请选择"
        allowClear
        style="width: 600px; text-align: left; margin-left: 5px"
        show-search
        :options="optionList"
        :filter-option="filterOption"
      >
        <a-select-option v-for="(item, index) in optionList" :key="index" :value="item.value">
          {{ item.label }}
        </a-select-option>
      </a-select>
      <a-button type="primary" style="margin-left: 10px; border-radius: 6px" @click="sendOk">
        确认推送
      </a-button>

      <MsgTable ref="msgTableRef" @refresh="setTableList"></MsgTable>
      <Emoji ref="emojiRef" @okEmoji="setOkEmoji"></Emoji>
      <OutCinemaLine
        ref="OutCinemaLineRef"
        @refresh="getOutCinemaLine"
        :okOutLineList="okOutLineList"
      ></OutCinemaLine>
    </div>
  </div>
</template>

<style lang="less" scoped>
.hiddenText {
  display: inline-block;
  width: 1000px;
  overflow: hidden;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

a:hover {
  color: red;
}

.rowBox {
  display: flex;
  margin-bottom: 15px;
  // background: pink;
}

.label-1 {
  width: 140px;
  text-align: center;
  line-height: 30px;
}

.label-3 {
  width: 160px;
  text-align: center;
  line-height: 30px;
}

.iptWidth {
  width: 500px;
}
</style>
